<template>
    <div class="changeAvatar">
        <el-dialog width="700px" v-model="initVisible" :show-close="false">
            <div id="bigcloser" style="border-bottom: 1px solid #4a4c53; padding-bottom: 15px">
                <strong></strong>
                <h4>
                    {{ $t("language.My.dialogtitle") }}
                </h4>
                <span @click="store.$patch({ changeAvatar: false })">
                    <el-icon color="#b5b6c8" size="16">
                        <CloseBold />
                    </el-icon>
                </span>
            </div>
            <ul>
                <li v-for="(item, index) in imglist" @click="choose(index)" :key="index">
                    <NuxtImg :class="index == activeIndex ? 'border' : ''" :src="item" alt="" />
                    <NuxtImg class="check" v-if="index == activeIndex" src="/img/check.png" alt="" />
                </li>
            </ul>
            <el-button class="btn" @click="confirm">{{ $t('language.dialog.btn')
                }}</el-button>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { CloseBold } from '@element-plus/icons-vue'
import { ref,shallowRef,shallowReactive, computed, reactive } from "vue"
let store = useStore()
let initVisible = computed(() => store.changeAvatar)
let imglist = shallowReactive<string[]>([
    '/img/avatar1.png',
    '/img/avatar2.png',
    '/img/avatar3.png',
    '/img/avatar4.png',
    '/img/avatar5.png',
    '/img/avatar6.png',
    '/img/avatar7.png',
    '/img/avatar8.png'
])
let activeIndex = shallowRef<number>(9)
let choose = (index: number) => {
    activeIndex.value = index
}
let confirm = () => {
    store.$patch({ avatar: imglist[activeIndex.value] })
    store.$patch({ changeAvatar: false })
}
</script>

<style lang="scss">
.changeAvatar {
    .el-dialog {
        padding: 15px 20px !important;
        background-color: rgb(50, 53, 62) !important;
        border-radius: 10px !important;
    }

    #bigcloser {
        width: 100%;
        @include flex(row, flex-end, center);

        strong {
            display: block;
            width: 28px;
            height: 28px;
        }

        h4 {
            flex: 1;
            font-size: 18px;
            color: #fff;
            text-align: center;
        }

        span {
            display: block;
            width: 28px;
            height: 28px;
            @include flex(row, center, center);
            border: 2px solid #b5b6c8;
            border-radius: 16px;
            margin-right: -7px;
            cursor: pointer;
        }
    }

    ul {
        width: 100%;
        @include flex(row, space-between, flex-start);
        flex-wrap: wrap;
        padding-top: 20px;

        li {
            width: 25%;
            height: 120px;
            position: relative;
            @include flex(row, flex-start, center);
            cursor: pointer;

            img {
                width: 116px;
                height: 116px;
                border-radius: 60px;
                border: 2px solid transparent;
            }

            .border {
                border: 2px solid rgb(0, 232, 157);
            }

            .check {
                position: absolute;
                width: 20px;
                height: 20px;
                left: 96px;
                top: 75%;
                margin-top: -10px;
            }

        }

        li {
            margin-top: 20px;
        }

    }


    .btn {
        display: block;
        width: 48%;
        height: 48px;
        margin: 50px auto;
        background: #0a906c;
        border-radius: 5px;
        cursor: pointer;
        color: #fff;
        font-size: 14px;

    }
}
</style>